<template>
  <!-- 所有字段管理员都有权限设置隐藏或者显示-->
  <div class="" v-if="!isMobile">
    <el-card v-if="contentView">
      <el-row>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料编号" size="medium"
            v-model="queryInfo.materialNumber"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="物料描述" size="medium"
            v-model="queryInfo.materialName"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="4" style="margin-right: 10px">
          <el-input
            placeholder="订单号" size="medium"
            v-model="queryInfo.orderNos"
            clearable>
          </el-input>

        </el-col>
        <el-col :span="2">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>

        <el-col :span="2">
          <el-button    type="primary" :loading="isExport" @click="exportData" icon="el-icon-upload2" >导出</el-button>
        </el-col>
<!--        <el-col :span="15" style="text-align: right;">-->
<!--         <div style="display: flex;justify-content:flex-end;float: right;margin-top: 11px;">-->
<!--          &lt;!&ndash;<el-upload  v-if="authFilter('export_stock_detail')"  style="margin: 0 10px;" action="http://47.106.202.170:10084/material/stock/importStock"&ndash;&gt;-->
<!--            &lt;!&ndash;:on-success="uploadSuccessHandler"&ndash;&gt;-->
<!--            &lt;!&ndash;:on-error="uploadFailHandler"&ndash;&gt;-->
<!--            &lt;!&ndash;:before-upload="beforeUpload"&ndash;&gt;-->
<!--            &lt;!&ndash;name="excel" :show-file-list="false" :headers="headers">&ndash;&gt;-->
<!--             &lt;!&ndash;<el-button type="primary" icon="el-icon-download">导入</el-button>&ndash;&gt;-->
<!--            &lt;!&ndash;</el-upload>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button type="primary" icon="el-icon-download" @click="downloadMaterailTemplate">下载导入模板</el-button>&ndash;&gt;-->
<!--             <el-button    type="primary" :loading="isExport" @click="exportData" icon="el-icon-upload2" >导出</el-button>-->
<!--             &lt;!&ndash; <el-button type="primary" icon="el-icon-plus" @click="contentView=false">添加</el-button> &ndash;&gt;-->

<!--         </div>-->
<!--        </el-col>-->
      </el-row>
      <!--表格-->
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'5px'}" :data="tableData" border v-loading="loading">
        <el-table-column type="index" label="序号" v-if="false" align="center" width="50"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="repositoryName" label="仓库名称" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="materailName" label="物料描述" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="materailNumber" label="物料编码"   :show-overflow-tooltip="true" align="center">
        </el-table-column>
        <el-table-column prop="orderNos" :show-overflow-tooltip="true" label="订单号" align="center">
        </el-table-column>
        <el-table-column prop="balance" label="剩余可用库存" align="center"   :show-overflow-tooltip="true"/>
        <el-table-column prop="frozen" label="冻结库存" align="center"   :show-overflow-tooltip="true"/>
        <el-table-column prop="unit" label="计量单位" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <!-- 所有字段管理员都有-->
        <el-table-column prop="avgPrice" label="单价" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="money" label="总金额" align="center"   :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column prop="standObjectNumber" label="标准对像号" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="standProjectNumber" label="行项目号" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="unloadingAddress" label="卸货点" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="costCenter" label="成本中心" align="center"   :show-overflow-tooltip="true">
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
      <div style="float: right">合计金额:{{sum}}</div>
      <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <submitForm v-else @closeView="closeView" @refresh="refreshTable"></submitForm>
  </div>
  <!-- 手机 -->
  <div class="mobile-box" v-else>
    <el-row>
      <el-col :span="4"  class="mobile-seacher-box">
        <el-input
          placeholder="物料编号" size="medium"
          v-model="queryInfo.materialNumber"
          clearable>
        </el-input>

      </el-col>
      <el-col :span="4"  class="mobile-seacher-box" >
        <el-input size="medium"
                  placeholder="物料描述"
                  v-model="queryInfo.materialName"
                  clearable>
        </el-input>
      </el-col>
      <el-col :span="4"  class="mobile-seacher-box">
        <el-input size="medium"
                  placeholder="订单号"
                  v-model="queryInfo.orderNos"
                  clearable>
        </el-input>
      </el-col>
      <el-col :span="2" class="mobile-seacher-box">
        <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
      </el-col>
    </el-row>
    <div >
      <ul v-if="tableData.length" v-loading="loading">
        <li class="list-item" v-for="item in tableData" :key="item.id">
          <el-card>
            <el-col :span="24">
              <div>仓库名称：{{ item.repositoryName }}</div>
            </el-col>
            <el-col :span="24">
              <div>物料描述：{{ item.materailName }}</div>
            </el-col>
            <el-col :span="24">
              <div>物料编号：{{ item.materailNumber }}</div>
            </el-col>
            <el-col :span="24">
              <div>订单号：{{ item.orderNos }}</div>
            </el-col>
            <el-col :span="24">
              <div>剩余可用库存：{{ item.balance }}</div>
            </el-col>
            <el-col :span="24">
              <div>冻结库存：<span >{{ item.frozen }}</span></div>
            </el-col>
            <el-col :span="24">
              <div>计量单位：{{ item.unit }}</div>
            </el-col>
            <el-col >
              <div>创建时间：{{item.createTime}}</div>
            </el-col>
            <el-col :span="24" class="btn-box">
              <el-button type="primary" size="mini" @click="showDetailFun(item)">详情</el-button>
            </el-col>
          </el-card>
        </li>
        <el-pagination
          v-if="total >= queryInfo.pageSize"
          style="text-align: center; width: 90%; overflow: auto"
          :disabled="loading"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNo"
          :page-sizes="[25, 50]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </ul>
      <div v-if="!tableData.length" class="no-data">
        <img :src="require('../../../assets/noData.jpg')" />
      </div>
    </div>
    <!--详情-->
    <el-dialog :modal-append-to-body="false" :close-on-click-modal="false" @close="closeDetailFun" title="详情" :visible.sync="showDetail" width="90%" class="detail-box">
      <mobileDetail :detailData="detailData"></mobileDetail>
    </el-dialog>
  </div>

</template>

<script>
import submitForm from './components/submitForm.vue'
import mobileDetail from './components/mobileDetail'
import { mapState } from 'vuex'
import { getInventoryList, exportInventory, downExportInventory, importInventory, totalStockDetailAmount } from '@/api/inventoryManagement.js'
let $this = null
export default {
  name: 'inventoryDetails',
  components: {
    submitForm,
    mobileDetail
  },
  computed: {
    ...mapState(['authList'])
  },
  data () {
    return {
      contentView: true,
      placeholder: '材料名称',
      loading: false,
      headers: {
        apiKey: window.sessionStorage.getItem('token')
      },
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
        materialName: ''
      },
      total: 2,
      tableData: [],
      isExport: false,
      sum: 0,
      // 手机
      detailData: {},
      isMobile: false,
      showDetail: false
    }
  },
  created () {
    $this = this
    if (this.$utils.isMobile()) {
      this.isMobile = true
    }
    this.getList()
  },
  methods: {
    authFilter (code) {
      let flag = false
      if (this.authList.length) {
        this.authList.forEach(item => {
          if (item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    // 导入成功触发
    uploadSuccessHandler (response, file, fileList) {
      this.$loading().close()
      if (response.success) {
        $this.$message({
          type: 'success',
          message: response.message,
          showClose: true
        })
        this.getList()
      } else {
        $this.$message({
          type: 'error',
          message: response.message,
          showClose: true
        })
      }
    },
    uploadFailHandler () {
      this.$loading().close()
      $this.$message.error('导入失败')
    },
    // 下载导入模板
    downloadMaterailTemplate () {
      downExportInventory().then(res => {
        $this.downloadFile(res, '库存明细导入模板')
      }).catch(err => {
        return $this.$message.error('导出文件错误')
      })
    },
    downloadFile (res, name) {
      const blob = new Blob([res.data])
      const fileName = name + '.xlsx'
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    },
    beforeUpload (file) {
      this.$loading({
        lock: true,
        text: '正在导入...',
        spinner: 'el-icon-loading'
      })
    },
    // 导出
    exportData () {
      $this.isExport = true
      exportInventory($this.queryInfo)
        .then((res) => {
          $this.isExport = false
          $this.downloadFile(res, '库存明细')
        })
        .catch((err) => {
          $this.isExport = false
          return $this.$message.error('导出文件错误')
        })
    },
    getList () {
      $this.loading = true
      getInventoryList($this.queryInfo).then(res => {
        $this.loading = false
        $this.tableData = res.data.data.records
        $this.total = res.data.data.total
      }).catch(err => {
        $this.loading = false
        return $this.$message.error(err.message)
      })
      totalStockDetailAmount($this.queryInfo).then(res => {
        $this.sum = res.data.data
      })
    },
    handleCurrentChange (val) {
      $this.queryInfo.pageNo = val
      this.getList()
    },
    handleSizeChange (size) {
      $this.queryInfo.pageSize = size
      this.getList()
    },
    seacher (key) {
      // this.queryInfo.materailName = key
      this.getList()
    },
    // 返回table
    closeView () {
      $this.contentView = true
    },
    refreshTable () {
      $this.contentView = true
    },
    // 手机
    // 显示详情
    showDetailFun (item) {
      $this.showDetail = true
      $this.detailData = item
    },
    // 关闭详情弹窗
    closeDetailFun () {
      $this.detailData = {}
      $this.showDetail = false
    }
  }
}
</script>

<style lang="scss" scoped>
  @mixin box-width {
    width: 90%;
    margin: 10px auto;
  }
  .mobile-box {
    position: relative;
    .el-row{
      display: flex;
      flex-direction: column;
    }
    .btn-data {
      @include box-width;
    }
    .mobile-seacher-box{
      width: 90%;
      margin: 10px auto;
    }
    ul {
      padding: 0;
      & > li {
        @include box-width;
        list-style-type: none;
        .btn-box {
          text-align: right;
          margin-bottom: 10px;
        }
        .el-col {
          margin: 5px 0;
        }
      }
    }
    .no-data {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 400px;
      }
    }
    .addForm {
      .el-input,
      .el-select,
      .el-textarea{
        width: 100%;
      }
      .el-form-item{
        padding: 0 20px;
        margin-bottom: 10px;
        .btn-box{
          width: 100%;
          text-align: center;
          margin: 20px 0;
          .el-button{
            width: 45%;
          }
        }
      }
    }
    .detail-box,.materail-box{
      overflow: auto;
      div{
        margin: 5px 0;
        font-size: 15px;
      }
    }

  }
</style>
